<template>
	<view @touchmove.stop.prevent="() => false">
		<u-popup :show="show" mode="center" bgColor="transparent" @close="closeEvent">
			<view class="pop_view">
				<image class="pop_logo" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/pop_icon.png"></image>
				<view class="popColor"></view>
				<label class="pop_title">恭喜您</label>
				<view class="pop_view_center">
					<span v-if="dataCom.length > 1" class="pop_content" v-for="(item, index) in dataCom" :key="index">
						{{ getTypeString(JSON.parse(item.message)) }}排行
						<span style="color: #FF822E;font-size: 28rpx;">第{{ JSON.parse(item.message).rank }}名</span>
						， 获得 &nbsp;
						<span style="color: #FF822E;font-size: 28rpx;">{{ JSON.parse(item.message).point }}</span>
						&nbsp; 积分
					</span>

					<span v-else class="pop_content" v-for="(item, index) in dataCom" :key="index">
						{{ getTypeString(JSON.parse(item.message)) }}排行
						<span style="color: #FF822E;font-size: 28rpx;">第{{ JSON.parse(item.message).rank }}名</span>
						<br />
						获得 &nbsp;
						<span style="color: #FF822E;font-size: 28rpx;">{{ JSON.parse(item.message).point }}</span>
						&nbsp; 积分
					</span>
				</view>
				<view @click="closeEvent" class="qd_btn">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'rankList-popup',
	data() {
		return {};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		integral: {
			type: String,
			default: ''
		},
		dataCom: {
			type: Array,
			default: []
		}
	},

	methods: {
		closeEvent() {
			this.$emit('close');
		},
		getTypeString(item) {
			if (item.type == 0) {
				return '昨天';
			} else if (item.type == 1) {
				return '上周';
			} else if (item.type == 2) {
				return '上月';
			}
			return '';
		}
	}
};
</script>

<style scoped>
.pop_view {
	width: 530rpx;
	min-height: 428rpx;
	background-color: #e0ede9;
	border-radius: 24rpx;
	display: flex;
	flex-direction: column;
}

.pop_logo {
	width: 252rpx;
	height: 242rpx;
	position: absolute;
	float: left;
	left: auto;
	right: -42rpx;
	top: -72rpx;
	z-index: 9;
}
.popColor {
	background: #60ae8e;
	height: 160rpx;
	width: 30rpx;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	border-radius: 24rpx 24rpx 0 0;
}
.pop_title {
	margin-left: 32rpx;
	margin-top: 68rpx;
	color: #234941;
	font-size: 40rpx;
	font-weight: 500;
	line-height: 56rpx;
}
.pop_view_center {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.pop_content {
	margin-left: 32rpx;
	margin-top: 20rpx;
	/* width: 334rpx; */
	line-height: 48rpx;
	font-size: 28rpx;
}

.pop_list {
	margin-left: 32rpx;
	margin-top: 20rpx;
	/* width: 334rpx; */
	line-height: 48rpx;
	font-size: 28rpx;
}

.qd_btn {
	margin-top: 60rpx;
	margin-left: 50rpx;
	margin-bottom: 40rpx;
	width: calc(100% - 100rpx);
	height: 88rpx;
	border-radius: 24rpx;
	background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
	box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(55, 168, 148, 0.2);
	color: #ffffff;
	line-height: 88rpx;
	text-align: center;
	font-size: 30rpx;
}
</style>
